<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.load('visualization', '1', {packages:['annotatedtimeline']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Type', 'Money'],
          ['Meal',     992.31],
          ['Telecommunication',      300],
          ['Transportation', 673.50],
          ['Dailly Necessary',    290.7],
          ['Snacks,Fruits',    77.8],
          ['Other',  326.5]
        ]);

        var options = {
          title: 'Expense Types',
          legend: {position: 'bottom'},
          is3D: 'true',
	  chartArea:{left:10,top:20,width:"90%",height:"65%"}
        };

        var chart  = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
	var chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
        chart2.draw(data, options);

	 var data2 = new google.visualization.DataTable();
        data2.addColumn('date', 'Date');
        data2.addColumn('number', 'Sold Pencils');
        data2.addColumn('string', 'title1');
        data2.addColumn('string', 'text1');
        data2.addColumn('number', 'Sold Pens');
        data2.addColumn('string', 'title2');
        data2.addColumn('string', 'text2');
        data2.addRows([
          [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
          [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
          [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
          [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,5), 51476, 'Bought Pensx','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,8), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart3 = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div3'));
        chart3.draw(data2, {displayAnnotations: true});
      }
    </script>
  </head>
  <body>
<h2>Pie Chart</h2>
    <div id="chart_div" style="width: 480; height: 800px;"></div>
<h2>Column Chart</h2>
    <div id="chart_div2" style="width: 480; height: 800px;"></div>
<h2>Timeline Chart</h2>
    <div id="chart_div3" style="width: 1280; height: 600px;"></div>
  </body>
</html>
